<!-- tag标签菜单 -->
<template>
  <el-scrollbar>
    <div class="tabs_box">
      <!-- 标签页 -->
      <el-dropdown
        trigger="contextmenu"
        v-for="(item, index) in tabsList"
        :key="item.path"
        @command="handleCommand"
      >
        <el-tag
          @click="tabCut(index)"
          @close="tabClose(index)"
          :effect="item.path == $route.path ? 'dark' : 'plain'"
          :type="item.path == $route.path ? '' : 'info'"
          :closable="item.name != 'homepage'"
          :key="index + 1"
        >
          <div style="display: flex; align-items: center">
            <el-icon v-show="item.path == $route.path">
              <Location />
            </el-icon>
            <span>{{ $t(item.meta.title) }}</span>
          </div>
        </el-tag>
        <!-- 下拉菜单部分 -->
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :icon="RefreshLeft"
              :command="{ handle: 'renovate', index }"
              >刷新</el-dropdown-item
            >
            <el-dropdown-item
              :icon="Close"
              :disabled="tabsList.length == index + 1"
              :command="{ handle: 'closeAllRightTab', index }"
              v-if="item.name != 'home'"
              >关闭右侧菜单</el-dropdown-item
            >
            <el-dropdown-item
              :icon="CircleClose"
              :command="{ handle: 'closeAllRightTab', index: 0 }"
              >全部关闭</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-scrollbar>
</template>

<script>
import {
  Location,
  Close,
  RefreshLeft,
  CircleClose,
} from "@element-plus/icons-vue";
import { markRaw } from "vue";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    Location,
    Close,
    RefreshLeft,
    CircleClose,
  },
  data() {
    return {
      Close: markRaw(Close),
      RefreshLeft: markRaw(RefreshLeft),
      CircleClose: markRaw(CircleClose),
    };
  },
  computed: {
    ...mapState({
      tabsList: (store) => store.tagpage.tabsList, //用户数据
    }),
  },
  created() {
    this.addTab(this.$route);
  },
  methods: {
    ...mapActions([
      "addTab",
      "tabCut",
      "tabClose",
      "renovate",
      "closeAllRightTab",
    ]),
    // 下拉菜单触发函数
    handleCommand(data) {
      this[data.handle](data);
    },
  },
  watch: {
    // 监听路由的变化
    $route(n) {
      this.addTab(n);
    },
  },
};
</script>

<style lang="less" scoped>
.tabs_box {
  height: 35px;
  display: flex;
  margin: 0px 15px;
  align-items: center;
  // tab的样式
  .el-tag {
    margin-right: 7px;
    border-radius: 0px;
    cursor: pointer;
  }
}
</style>
